<template>
  <div class="head">
    <div class="tou">
      <van-icon @click="off()" name="arrow-left" />
      <span></span>
      <van-cell @click="showPopup">
        <van-icon name="share-o" />
      </van-cell>
      <van-popup v-model="show" position="bottom" :style="{ height: '30%' }">
        <div class="lian">
          <p v-for="(v, i) in lian" :key="i">
            <img :src="v.imgurl" alt="" />
            <span>{{ v.txt }}</span>
          </p>
        </div>
      </van-popup>
    </div>
    <div class="cont">
        <p>
            <span>{{arrlist.title}}</span>
            <span>{{arrlist.money}}</span>
        </p>
        <p>
            <span><van-icon name="location-o" />{{arrlist.info.dizhi}}</span>
            <span><van-icon name="notes-o" />{{arrlist.staus.timer}}</span>
            <span><van-icon name="award-o" />{{arrlist.staus.study}}</span>
        </p>
    </div>

    <div class="person">
        <p><img :src="arrlist.info.imgurl" alt=""></p>
        <p>
            <span>{{arrlist.info.people}} <b>今日活跃</b></span>
            <span>{{arrlist.txt.txt1}} {{arrlist.txt.txt2}} {{arrlist.txt.txt3}}</span>
        </p>
    </div>

    <div class="jiang">
        <h2>奖金绩效</h2>
        <h4>13-17个月</h4>
    </div>

    <div class="zhiwei">
        <h2>职位详情</h2>
        <p>
            <span>{{arrlist.staus.skill1}}</span>
            <span>{{arrlist.staus.skill2}}</span>
            <span>{{arrlist.staus.gangwei1}}</span>
            <span>移动端</span>
            <span>小程序</span>
        </p>
        <h5>
            公司：{{arrlist.txt.txt1}}
        </h5>
    </div>

    <div class="gangwei">
        <h6>职位要求</h6>
        <p>{{arrlist.jn1}}</p>
        <p>{{arrlist.jn2}}</p>
        <p>{{arrlist.jn3}}</p>
        <p>{{arrlist.jn4}}</p>
        <p>{{arrlist.jn5}}</p>
    </div>
  </div>
</template>

<style scoped>
.head {
    overflow: hidden;
    margin: 0.10rem 0.20rem;
}
.tou {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 0.01rem solid #f0f0f0;
}
.tou .van-icon {
    font-size: 0.20rem;
}
.tou .van-cell {
    width: 0.50rem;
  font-size: 0.20rem;
}
.lian {
    height: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.lian > p {
    display: flex;
  flex-direction: column;
  align-items: center;
}
.lian > p > img {
    width: 0.60rem;
  height: 0.60rem;
}

/* cont */
.cont {
    font-size: 0.12rem;
}
.cont > p {
    display: flex;
    justify-content: space-between;
    margin: 0.10rem 0;
}
.cont > p:nth-child(1) > span:nth-child(1) {
    font-size: 0.18rem;
    font-weight: bold;
}
.cont > p:nth-child(1) > span:nth-child(2) {
    font-size: 0.16rem;
    font-weight: bold;
    color: #39c0ba;
}

/* person */
.person {
    display: flex;
    justify-content: flex-start;
    padding: 0.14rem 0;
    border-top: 0.01rem solid #ccc;
    border-bottom: 0.01rem solid #ccc;
}
.person > p:nth-child(1) > img {
    width: 0.60rem;
    height: 0.60rem;
    background: orange;
    border-radius: 50%;
}
.person > p:nth-child(2) {
    display: flex;
    flex-direction: column;
    margin-left: 0.20rem;
}
.person > p:nth-child(2) > span b {
    font-size: 0.12rem;
    color: #999;
}
.person > p:nth-child(2) > span:nth-child(1) {
    font-size: 0.14rem;
    margin-bottom: 0.10rem;
}
.person > p:nth-child(2) > span:nth-child(2) {
    font-size: 0.12rem;
}

/* jiang */
.jiang {
    padding: 0.14rem 0;
    border-bottom: 0.01rem solid #ccc;
}
.jiang > h2 {
    font-size: 0.14rem;
    font-weight: bold;
    margin-bottom: 0.10rem;
}

/* zhiwei */
.zhiwei {
    padding: 0.14rem 0;
    font-size: 0.12rem;
}
.zhiwei > h2 {
    font-size: 0.14rem;
    font-weight: bold;
}
.zhiwei > p {
    display: flex;
    justify-content: flex-start;
    margin: 0.10rem 0;
}
.zhiwei > p > span {
    margin-right: 0.04rem;
    padding: 0.06rem;
    background: #f0f0f0;
    border-radius: 0.04rem;
}
.zhiwei > h5 {
    font-size: 0.12rem;
}

/* gangwei */
.gangwei {
    margin-top: 0.10rem;
}
.gangwei > h6 {
    font-size: 0.14rem;
}
.gangwei  p {
    font-size: 0.12rem;
    margin: 0.04rem 0;
}
</style>

<script>
export default {
  data() {
    return {
      arrid: 0,
      index: 0,
      arrlist: [],
      show: false,
      lian:[
        {imgurl:"img/wx.jpg",txt:"微信好友"},
        {imgurl:"img/quan.jpg",txt:"微信朋友圈"},
        {imgurl:"img/lian.jpg",txt:"复制链接"}
      ]
    };
  },
  created() {
    this.getid();
  },
  methods: {
    off(){
      this.$router.push('/job/find/zonghe')
    },
    showPopup() {
      this.show = true;
    },
    getid() {
      this.arrid = this.$route.query.id;
      this.index = this.$route.query.i;
      this.findId(this.$store.state.arr1);
      this.findId(this.$store.state.arr2);
      this.findId(this.$store.state.arr3);
      this.findId(this.$store.state.arr4);
      this.findId(this.$store.state.arr5);
      this.findId(this.$store.state.arr6);
      this.findId(this.$store.state.guan);
      this.findId(this.$store.state.tui);
      this.findId(this.$store.state.hao);
      this.findId(this.$store.state.wen);
      this.findId(this.$store.state.chickall);
      this.findId(this.$store.state.kanguo);
      this.findId(this.$store.state.zhi1);
      this.findId(this.$store.state.zhi2);
      this.findId(this.$store.state.zhi3);
      this.findId(this.$store.state.zhi4);
      this.findId(this.$store.state.zhi5);
      this.findId(this.$store.state.zhi6);
    },
    findId(objarr) {
      if (this.arrid == objarr[this.index].id) {
        this.arrlist = objarr[this.index];
        console.log(this.arrlist);
      }
    },
  },
};
</script>
